﻿<script>
    $(function() {
        // Note: This will execute as soon as the main page is loaded.
    });

    function serverInitialize(id) {

        // Clear the <ul> elements
        $("#apps").empty();
        $("#groups").empty();

        $.post('/Home/GetServerById',
            { serverId: id },
            OnServerRetrieved);
    }

    function OnServerRetrieved(server) {
        $('#selectedTab').text(server.Name);  // Show the name of the app in the header
        $('#txtServerName').val(server.Name);
        $('#txtDescription').val(server.Description);
        $('#txtEnvironment').val(server.Environment);

        displayApps(server);
        displayVariableGroups(server);
    }

    function displayApps(server) {
        // Add the apps to the task listview.
        // First, sort the tasks by the Sequence property.
        var apps = server.ApplicationsWithOverrideGroup;
        apps.sort(SortAppGroupByName);

        // Now add the tasks to an array...
        // This approach from: http://stackoverflow.com/a/19083625/279516
        var items = $.map(apps, function (app) {
            return $('<li>').append(
                $('<a>', {
                    href: '#',
                    text: app.Application.Name,
                    click: function (e) {
                        e.preventDefault();
                        //window.showTask(app, task);  // What do we want to happen when the user clicks an app here?
                    }
                })
            );
        });

        // ... and apply all of the tasks to the listview at one time.
        $('#apps').append(items); //.listview('refresh');  // Need to refresh to get the new items to use the jQuery Mobile formatting
    }

    function displayVariableGroups(server) {
        var groups = server.CustomVariableGroups;
        groups.sort(SortVariableGroupByName);

        var items = [];
        $.each(groups, function (index, group) {
            items.push('<li><a href="#">' + group.Name + '</a></li>');
        });

        $('#appGroups').append(items); //.listview('refresh');  // Worked for jQuery Mobile, but not new approach (without jQuery Mobile)
    }

    function SortAppGroupByName(a, b) {
        var aName = a.Application.Name;
        var bName = b.Application.Name;
        return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
    }

    function SortVariableGroupByName(a, b) {
        var aName = a.Name;
        var bName = b.Name;
        return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
    }

</script>

<form>
    <div data-role="fieldcontain">
        <label for="txtServerName">Name:</label>
        <input type="text" data-mini="true" name="text-14" id="txtServerName" value="">
    </div>
    <div data-role="fieldcontain">
        <label for="txtDescription">Description:</label>
        <input type="text" data-clear-btn="true" data-mini="true" name="text-15" id="txtDescription" value="">
    </div>
    <div data-role="fieldcontain">
        <label for="txtEnvironment">Environment:</label>
        <input type="text" data-mini="true" name="text-14" id="txtEnvironment" value="">
    </div>

    <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
        <div data-role="collapsible">
            <h3>Apps</h3>
            <ul id="apps" data-role="listview" data-inset="true" />
        </div>
        <div data-role="collapsible">
            <h3>Variable Groups</h3>
            <ul id="groups" data-role="listview" data-inset="true" />
        </div>
    </div>
</form>